<template>
  <!-- 无样式 -->
  <div class="fixed top-16 w-56 text-right">
    <Menu>
      <MenuButton>Options</MenuButton>
      <MenuItems>
        <MenuItem v-slot="{ active }">
          <a href="/account-settings"> Edit </a>
        </MenuItem>
        <MenuItem v-slot="{ active }">
          <a href="/account-settings"> Duplicate </a>
        </MenuItem>
        <MenuItem disabled>
          <span class="opacity-75">Invite a friend (coming soon!)</span>
        </MenuItem>
        <MenuItem v-slot="{ active }">
          <button>Archive</button>
        </MenuItem>
        <MenuItem v-slot="{ active }">
          <button>Move</button>
        </MenuItem>
        <MenuItem v-slot="{ active }">
          <button>Delete</button>
        </MenuItem>
      </MenuItems>
    </Menu>
  </div>
</template>

<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
</script>
